<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-18 11:37:16
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-09 17:38:51
 * @FilePath: \Civil_Servant_Performance_PC\src\views\workbench\performance-office\index.vue
-->
<template>
  <div class="app-container workbench-container">
    <div class="header">
      <div>
        <span class="header-title">[{{ dept.deptName }}] {{ nickName }}</span>
        <span class="pl-10 header-title-normal">工作台</span>
      </div>
      <div class="header-dropdown">
        <el-dropdown trigger="click" @command="handleCommandYear">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.year, yearOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in yearOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown trigger="click" class="ml-10" @command="handleCommandQuarter">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.quarter, quarterOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in quarterOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">{{
              item.label
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
    </div>
    <el-row class="main">
      <el-row>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[3], 'z-index': 10 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />

            <span>计划</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[1], 'z-index': 8 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>执行</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[2], 'z-index': 6 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>评价</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[3], 'z-index': 4 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />

            <span>反馈</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-loading="otherWorkLoading">
        <el-col :span="6" class="full-height">
          <div class="step">
            <ul>
              <li v-for="(item, index) in otherWork.plan" :key="index">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i>{{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <collapse :visible="false" :default-height="30" :hideControll="item.list.length < 5">
                    <el-button
                      type="text"
                      v-for="subItem in item.list"
                      :key="subItem.lable"
                      :class="{ 'color-success font-bold': subItem.flag }"
                      @click="handleToPage(item, subItem)"
                    >
                      <span>{{ subItem.label }}</span>
                      <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                    </el-button>
                  </collapse>
                </div>
                <el-tabs v-else-if="Array.isArray(item.tabs) && item.tabs.length" :value="item.tabs.length ? item.tabs[0].label : ''">
                  <el-tab-pane v-for="tab in item.tabs" :key="tab.label" :label="tab.label" :name="tab.label">
                    <template>
                      <collapse :visible="false" :default-height="30" :hideControll="tab.list.length < 5">
                        <el-button
                          type="text"
                          v-for="tabItem in tab.list"
                          :key="tabItem.label + tab.label"
                          :class="{ 'color-success font-bold': tabItem.flag }"
                          @click="handleToPage(item, tabItem)"
                        >
                          <span>{{ tabItem.label }}</span>
                          <i class="el-icon-check font-bold" v-if="tabItem.flag"></i>
                        </el-button>
                      </collapse>
                    </template>
                  </el-tab-pane>
                </el-tabs>

                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step">
            <ul>
              <li v-for="(item, index) in otherWork.execution" :key="index">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i>{{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <collapse :visible="false" :default-height="30" :hideControll="item.list.length < 5">
                    <el-button
                      type="text"
                      v-for="subItem in item.list"
                      :key="subItem.lable"
                      :class="{ 'color-success font-bold': subItem.flag }"
                      @click="handleToPage(item, subItem)"
                    >
                      <span>{{ subItem.label }}</span>
                      <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                    </el-button>
                  </collapse>
                </div>
                <el-tabs v-else-if="Array.isArray(item.tabs) && item.tabs.length" :value="item.tabs.length ? item.tabs[0].label : ''">
                  <el-tab-pane v-for="tab in item.tabs" :key="tab.label" :label="tab.label" :name="tab.label">
                    <collapse :visible="false" :default-height="30" :hideControll="tab.list.length < 5">
                      <el-button
                        type="text"
                        v-for="tabItem in tab.list"
                        :key="tabItem.label"
                        :class="{ 'color-success font-bold': tabItem.flag }"
                        @click="handleToPage(item, tabItem)"
                      >
                        <span>{{ tabItem.label }}</span>
                        <i class="el-icon-check font-bold" v-if="tabItem.flag"></i>
                      </el-button>
                    </collapse>
                  </el-tab-pane>
                </el-tabs>
                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step">
            <ul>
              <li v-for="(item, index) in otherWork.evaluation" :key="index">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i> {{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <el-button
                    type="text"
                    v-for="subItem in item.list"
                    :key="subItem.lable"
                    :class="{ 'color-success font-bold': subItem.flag }"
                    @click="handleToPage(item, subItem)"
                  >
                    <span>{{ subItem.label }}</span>
                    <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                  </el-button>
                </div>
                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step step-border-none">
            <p class="step-empty text-center">暂无数据</p>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { list as listWork, listPerformanceOffices } from '@/api/workbench'
import { getDicts } from '@/api/system/dict/data.js'
import { quarterFormat } from '@/utils/quarter.js'
import collapse from '../components/expand-collapse.vue'

export default {
  name: 'department-office',
  props: {},
  dicts: ['biz_work_year_list'],
  components: { collapse },
  data() {
    return {
      otherWorkLoading: false,
      otherWork: {
        // 计划
        plan: [
          {
            label: '审核重点工作',
            basePath: '/work-approval/key-work',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'key-work'
            },
            list: []
          },
          {
            label: '审核中心工作',
            basePath: '/work-approval/center-work',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'center-work'
            },
            list: []
          }
        ],
        // 执行
        execution: [
          { label: '重点工作完成情况打分', basePath: '/score/key-supervision', path: '/performance-inventory', list: [] },
          { label: '中心工作完成情况确认', basePath: '/score/center-supervision', path: '/performance-inventory', list: [] },
          { label: '干部工作核查打分', basePath: '/score/cadre-supervision', path: '/score/cadre-supervision', list: [] },
          {
            label: '服务效能评价打分',
            basePath: '/performance-inventory',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'jxb-evaluation-comment'
            },
            list: []
          }
        ],
        // 评价
        evaluation: [
          {
            label: '汇总站办所绩效得分，提出等次建议',
            basePath: '/performance-inventory',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'quarter-performance'
            },
            list: []
          },
          {
            label: '汇总干部绩效得分，提出等次建议',
            basePath: '/performance-inventory',
            path: '/performance-inventory',
            query: {
              type: 'civil',
              tabs: 'cadre-performance'
            },
            list: []
          }
        ],
        // 反馈
        feedback: []
      },

      work: {
        // 计划
        plan: [
          {
            label: '申报重点工作',
            basePath: '/work/work-plan',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'key-work'
            },
            list: []
          },
          {
            label: '申报中心工作',
            basePath: '/work/work-plan',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'center-work'
            },
            list: []
          },
          {
            label: '干部工作计划',
            basePath: '/work/individual-approval',
            path: '/work/individual-approval',
            list: []
          }
        ],
        // 执行
        execution: [
          {
            label: '纪实重点工作',
            basePath: '/work/work-completion',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'key-work'
            },
            list: []
          },
          {
            label: '纪实中心工作',
            basePath: '/work/work-completion',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'center-work'
            },
            list: []
          },
          {
            label: '收集干部平时考核登记表',
            basePath: '/work/daily-performance',
            path: '/performance-inventory',
            query: {
              type: 'civil',
              tabs: 'daily-performance'
            },
            list: []
          }
        ],
        // 评价
        evaluation: [
          {
            label: '开展民主测评，对干部工作完成情况打分',
            basePath: '/work/democratic-evaluation',
            path: '/performance-inventory',
            query: {
              type: 'civil',
              tabs: 'democratic-evaluation'
            },
            list: []
          },
          {
            label: '中心工作完成情况打分',
            basePath: '/work/work-completion',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'center-work'
            },
            list: []
          }
        ],
        // 反馈
        feedback: [
          {
            label: '站办所季度绩效管理情况汇总表',
            basePath: '/performance-inventory',
            path: '/performance-inventory',
            query: {
              type: 'dept',
              tabs: 'quarter-performance'
            },
            list: []
          },
          {
            label: '干部季度绩效管理情况汇总表',
            basePath: '/performance-inventory',
            path: '/performance-inventory',
            query: {
              type: 'civil',
              tabs: 'cadre-performance'
            },
            list: []
          }
        ]
      },

      loading: false,
      stepTitleColor: ['#fff', '#fff', '#fff', '#fff'],
      queryParams: {
        deptId: '',
        year: '',
        quarter: ''
      },
      yearOptions: [],
      quarterOptions: []
    }
  },
  computed: {
    ...mapGetters(['nickName', 'dept'])
  },
  watch: {},
  created() {
    // this.queryParams.deptId = this.dept.deptId
    ;(async () => {
      await this.getDicts()
      this.handleCommandYear(this.queryParams.year)
    })()
  },
  methods: {
    // 跳转功能页面
    handleToPage(raw, current) {
      let { flag, deptId, civilServantId } = current
      let query = {}
      if (deptId) query.deptId = deptId
      if (civilServantId) query.civilServantId = civilServantId
      if (raw.query) {
        query = { ...raw.query, ...query, quarter: this.queryParams.quarter, year: this.queryParams.year }
      }
      console.log(query, flag ? raw.path : raw.basePath)
      this.$router.push({ path: flag ? raw.path : raw.basePath, query })
    },
    // 年度选择
    handleCommandYear(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleCommandQuarter(quarter)
    },
    // 季度选择
    handleCommandQuarter(quarter) {
      this.queryParams.quarter = quarter
      // let list = [{ label: quarter + '季度', flag: 0 }]
      // this.$set(this.otherWork.evaluation[0], 'list', list)
      // this.$set(this.otherWork.evaluation[1], 'list', list)
      this.getList()
      // this.otherWorkLoading = false
    },
    optionsFormat(val, list) {
      let find = list.find(item => item.value === val)
      return find ? find.label : '-'
    },

    async getDicts() {
      await getDicts('biz_work_year_list').then(res => {
        this.yearOptions = res.data.map(item => {
          return { value: item.dictValue, label: item.dictLabel }
        })
        this.queryParams.year = this.yearOptions[0].value
      })
    },
    getOtherWorkList() {
      this.otherWorkLoading = true
      listPerformanceOffices(this.queryParams)
        .then(res => {
          this.otherWorkLoading = false
          let { importantWorkHandleStatus, centerWorkHandleStatus, evaluateStatus, ratingStatus, personalWorkScoreStatus } = res.data
          let array1 = [],
            array2 = [],
            array3 = [],
            array4 = [],
            array5 = []

          try {
            for (let item of importantWorkHandleStatus) {
              let tempList1 = [],
                tempList2 = []
              for (let subItem of item.deptList) {
                tempList1.push({ label: subItem.deptName, flag: subItem.auditFlag, deptId: subItem.deptId })
                tempList2.push({ label: subItem.deptName, flag: subItem.supervisionFlag, deptId: subItem.deptId })
              }
              array1.push({ label: item.label, list: tempList1 })
              array2.push({ label: item.label, list: tempList2 })
            }
          } catch (error) {}
          try {
            let tempList3 = [],
              tempList4 = []
            for (let item of centerWorkHandleStatus.deptList) {
              tempList3.push({ label: item.deptName, flag: item.auditFlag, deptId: item.deptId })
              tempList4.push({ label: item.deptName, flag: item.supervisionFlag, deptId: item.deptId })
            }

            array3 = [{ label: centerWorkHandleStatus.label, list: tempList3 }]
            array4 = [{ label: centerWorkHandleStatus.label, list: tempList4 }]
          } catch (error) {}

          try {
            array5 = personalWorkScoreStatus.map(item => {
              return { label: item.deptName, flag: item.flag, deptId: item.deptId }
            })
          } catch (error) {}
          this.$set(this.otherWork.plan[0], 'tabs', array1)
          console.log('array1', array1)
          this.$set(this.otherWork.plan[1], 'list', array3)
          this.$set(this.otherWork.execution[0], 'tabs', array2)
          this.$set(this.otherWork.execution[1], 'list', array4)
          this.$set(this.otherWork.execution[2], 'list', array5)
          this.$set(this.otherWork.execution[3], 'list', evaluateStatus || [])
          this.$set(this.otherWork.evaluation[0], 'list', [ratingStatus] || [])
          this.$set(this.otherWork.evaluation[1], 'list', [ratingStatus] || [])
        })
        .catch(err => (this.otherWorkLoading = false))
    },
    getWorkList() {
      this.loading = true
      listWork(this.queryParams)
        .then(res => {
          this.loading = false
          let {
            importantWorkSubmitStatus,
            centerWorkSubmitStatus,
            democraticEvaluateSubmitStatus,
            centerWorkScoreStatus,
            workRegistrationSubmitStatus,
            workSubmitStatus
          } = res.data
          let planKeyWork = [],
            executionKeyWork = [],
            planCenterWork = [],
            executionCenterWord = []
          try {
            // 重点工作提取
            for (let item of importantWorkSubmitStatus) {
              planKeyWork.push({ label: item.label, flag: item.submitFlag })
              executionKeyWork.push({ label: item.label, flag: item.reportFlag })
            }
          } catch (error) {}

          // 中心工作提取
          if (JSON.stringify(centerWorkSubmitStatus) !== '{}') {
            let { label, submitFlag, reportFlag } = centerWorkSubmitStatus
            planCenterWork.push({ label, flag: submitFlag })
            executionCenterWord.push({ label, flag: reportFlag })
          }
          this.$set(this.work.plan[0], 'list', planKeyWork)
          this.$set(this.work.plan[1], 'list', planCenterWork)
          this.$set(this.work.plan[2], 'list', workSubmitStatus)
          this.$set(this.work.execution[0], 'list', executionKeyWork)
          this.$set(this.work.execution[1], 'list', executionCenterWord)
          this.$set(this.work.execution[2], 'list', workRegistrationSubmitStatus)
          this.$set(this.work.evaluation[0], 'list', [democraticEvaluateSubmitStatus])
          this.$set(this.work.evaluation[1], 'list', [centerWorkScoreStatus])
        })
        .catch(err => (this.loading = false))
    },
    getList() {
      this.getWorkList()
      this.getOtherWorkList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/assets/styles/workbench.scss');
// /deep/ .el-select .el-input.is-focus .el-input__inner {
//   border: none;
// }
::v-deep .el-tabs__nav-wrap::after {
  width: 0;
}
::v-deep .el-tabs__nav {
  border-bottom: 2px solid #dfe4ed;
}

::v-deep .el-button + .el-button {
  margin-left: 0;
}
::v-deep .el-button {
  margin-right: 10px;
}
</style>
